'use strict';

import {
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';
import React from 'react';
import {Utils} from '../config/utils';
import URL from '../config/server';
import Swiper from 'react-native-swiper';

export default class Slider extends React.Component {
    toWebContent(num) {
        if(this.props.sliderLink[num]==''){
            return;
        }
        this.props.navigator.push({
            id: 'WebContent',
            message: this.props.sliderLink[num]
        })
    }

    render() {
        return (
            <Swiper showsButtons={false} autoplayTimeout={this.props.timeOut} width={this.props.width} height={this.props.height} autoplay={true} loop={true} showsPagination={false}>
                <TouchableOpacity onPress={()=>{this.toWebContent(0)}}>
                    <Image style={[styles.img,{height:this.props.height,width:this.props.width}]} source={{uri:this.props.sliderImg[0]}}></Image>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{this.toWebContent(1)}}>
                    <Image style={[styles.img,{height:this.props.height,width:this.props.width}]} source={{uri:this.props.sliderImg[1]}}></Image>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{this.toWebContent(2)}}>
                    <Image style={[styles.img,{height:this.props.height,width:this.props.width}]} source={{uri:this.props.sliderImg[2]}}></Image>
                </TouchableOpacity>
            </Swiper>
        );
    }
}

const styles = StyleSheet.create({
    img:{
        height: 125,
        width: Utils.size.width,
        resizeMode: Image.resizeMode.stretch
    }
});

